<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>类别管理</span>
    </div>
    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      :default-operate="false"
      :editable="true"
      :deletable="false"
      @edit="edit"
      @del="del"
    />
  </el-card>
</template>

<script>
  import {mapGetters} from 'vuex'
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'

  export default {
    name: 'Home',
    components: {UploadExcelComponent},
    data() {
      return {
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        formTitle: [
          {
            cn: 'id：',
            en: 'id'
          },
          {
            cn: '组名称：',
            en: 'name'
          }
        ],
        formData: {},
        tableTitle: [
          {
            cn: 'id',
            en: 'id'
          },
          {
            cn: '组名称',
            en: 'name'
          },
          {
            cn: '创建时间',
            en: 'created_at'
          },
          {
            cn: '修改时间',
            en: 'updated_at'
          }
        ],
        tableData: [],

        exportTitle: [],
        exportData: [],

      }
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getTableList(data) {
        const loading = this.$loading()
        loading.close()
        let datas
        if (this.onFilter) {
          datas = {...data, filter_info: this.filter_info,page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize}
        } else {
          datas = data
        }
        this.$get('action/WechatNumber/groups', datas)
          .then(res => {
            const list = res.data.length && res.data
            this.tableData = list || []
            loading.close()
          })
          .catch(_ => {
            loading.close()
          })
      },

      // 搜索
      search() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (origin[key] && key !== 'created_at') {
            data[key] = origin[key]
          } else if (key === 'created_at') {
            data.startDate = origin[key][0]
            data.endDate = origin[key][1]
          }
        }

        this.onFilter = true
        this.filter_info = data
        this.getTableList()
      },
      reset() {
        this.onFilter = false
        this.filter_info = {}
        this.getTableList()
      },

      edit(val) {
        console.log(val)
        this.$router.push({
          name: 'category.edit',
          query: {id: val.row.id},
          params: {
            details: val.row
          }
        })
      },
      del(val) {
        this.getTableList()
      },
      addnew() {
        console.log(1)
      }

    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .table-menu {
    padding-bottom: 15px;
  }

</style>
